<template>
  <div>
    <el-menu
      :default-active="defaultActive"
      class="el-menu-vertical-demo"
      background-color="rgb(61,95,129)"
      text-color="#fff"
      active-text-color="#ffd04b"
      router
    >
      <el-menu-item index="/index/home">
        <template #title>
          <el-icon><Menu /></el-icon>
          <span>首页</span>
        </template>
      </el-menu-item>
      <el-sub-menu :index="index + ''" v-for="(item,index) in menus" :key="item.id">
        <template #title>
          <el-icon>
            <component :is="item.icon" v-if="item.icon"></component>
          </el-icon>
          <span>{{ item.title }}</span>
        </template>
        <el-menu-item :index="'/index'+child.url" v-for="child in item.children" :key="child.id">
          {{ child.title }}
        </el-menu-item>
      </el-sub-menu>
      <!-- <el-sub-menu index="2">
        <template #title>
          <el-icon><Tools /></el-icon>
          <span>系统管理</span>
        </template>
        <el-menu-item index="/index/menu">菜单管理</el-menu-item>
        <el-menu-item index="/index/role">角色管理</el-menu-item>
        <el-menu-item index="/index/user">管理员管理</el-menu-item>
      </el-sub-menu>
      <el-sub-menu index="3">
        <template #title>
          <el-icon><Tools /></el-icon>
          <span>商城管理</span>
        </template>
        <el-menu-item index="1-1">商品分类</el-menu-item>
        <el-menu-item index="1-1">商品规格</el-menu-item>
        <el-menu-item index="1-1">会员管理</el-menu-item>
        <el-menu-item index="1-1">轮播图管理</el-menu-item>
        <el-menu-item index="1-1">秒杀活动</el-menu-item>
      </el-sub-menu> -->
    </el-menu>
  </div>
</template>

<script setup>
import {ref,onMounted} from 'vue'
import { useRoute } from 'vue-router'
const $route = useRoute()
let defaultActive = ref('/index/home')
const userinfo = ref({})
const menus = ref([])
onMounted(()=>{
    defaultActive.value = $route.path
    userinfo.value = JSON.parse( localStorage.getItem('userinfo') || '{}' )
    menus.value = userinfo.value.menus

})
</script>

<style>
</style>